import React from 'react';
import * as THREE from 'three';

// 货位组件
export default function StorageSlot({ position, hasGoods, slotInfo, onClick, isSelected }) {
  // 基础颜色：空闲时为透明白色，有货时为绿色
  const baseColor = hasGoods ? '#4CAF50' : '#FFFFFF'; // 有货时绿色，空闲时透明白色
  
  // 基础透明度
  const baseOpacity = hasGoods ? 0.8 : 0.4;
  
  // 高亮效果：调整材质属性而不是颜色
  const metalness = isSelected ? 0.5 : 0.2;
  const roughness = isSelected ? 0.1 : 0.3;
  const emissive = isSelected ? new THREE.Color(baseColor).multiplyScalar(0.3) : new THREE.Color(0x000000);
  const opacity = isSelected ? Math.min(1.0, baseOpacity + 0.3) : baseOpacity;

  return (
    <mesh 
      position={position}
      onClick={(e) => {
        e.stopPropagation();
        onClick && onClick(slotInfo.id, slotInfo);
      }}
      castShadow 
      receiveShadow
    >
      <boxGeometry args={[0.9, 0.9, 0.9]} />
      <meshStandardMaterial 
        color={baseColor} 
        metalness={metalness}
        roughness={roughness}
        transparent={true}
        opacity={opacity}
        emissive={emissive}
      />
      
      {/* 选中时的边框效果 */}
      {isSelected && (
        <lineSegments>
          <edgesGeometry args={[new THREE.BoxGeometry(0.92, 0.92, 0.92)]} />
          <lineBasicMaterial color="#FFD700" linewidth={2} />
        </lineSegments>
      )}
    </mesh>
  );
}